<template>
  <div class='helpWrapper'>
    <div class="helpMiddle">
        <div class="helpCase">
            <div class="helpContentLeft">
                <div class="helpTop">
                    帮助中心
                </div>
                <div class="helpBottom">
                    <el-collapse v-model="activeName" accordion class="elCollapseWrapper">
                        <el-collapse-item :title="item.title" :name="item.name" v-for="item in menuList" :key="item.name">
                            <div class="item" v-for="element in item.children" :key="element.name" :class="{active: element.name === firstName}" @click="handleMenu(element.name)">
                                {{element.title}}
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
            <div class="helpContentRight" :style="{minHeight: helpHeight}">
                <div class="helpContentRightTitle">
                    {{firstName}}
                </div>
                <div class="helprightContent">
                    {{firstName}}
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import Top from '@/components/top/top.vue'
import Footer from '@/components/footer/footer.vue'
export default {
  name: 'Help',
  data () {
    return {
      helpHeight: '',
      firstName: 'produce',
      activeName: '1',
      menuList: [
        {
          name: '1',
          title: '关于我们',
          children: [
            {
              name: 'produce',
              title: '公司介绍'
            },
            {
              name: 'pingtai',
              title: '我们的平台'
            },
            {
              name: 'excellent',
              title: '我们的优势'
            },
            {
              name: 'do',
              title: '我们的使命'
            }
          ]
        },
        {
          name: '2',
          title: '服务商相关',
          children: [
            {
              name: 'produce',
              title: '公司介绍'
            },
            {
              name: 'pingtai',
              title: '我们的平台'
            },
            {
              name: 'excellent',
              title: '我们的优势'
            },
            {
              name: 'do',
              title: '我们的使命'
            }
          ]
        }
      ]
    }
  },
  mounted () {
    this.helpHeight = window.innerHeight - 448 + 'px'
  },
  components: {
    Top,
    Footer
  },
  created () {
  },
  methods: {
    handleMenu (name) {
      this.firstName = name
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/css/variable.styl';
.helpWrapper {
    .helpMiddle {
        background-color white
        padding-bottom 20px
        padding-top 20px
        .helpCase {
            width 1200px
            margin 0 auto
            display flex
            .helpContentLeft {
                width 18%
                background-color $color-background
                .helpTop {
                    text-align center
                    font-size: 24px
                    color #666
                    font-weight bold
                    padding 20px 0px
                }
                .helpBottom {
                    padding 0px 20px
                    .elCollapseWrapper {
                        .item {
                            cursor pointer
                            padding 10px 20px
                            border-bottom-style solid
                            border-width: 1px
                            border-color: #E4E4E4
                            &:last-child {
                                border-bottom-style solid
                                border-width: 1px
                                border-color: white
                            }
                        }
                        .active {
                            color $color-theme
                        }
                    }
                }
            }
            .helpContentRight {
                background-color $color-background
                margin-left 10px
                width 82%
                .helpContentRightTitle {
                    color #666
                    text-align center
                    font-size: 24px
                    font-weight bold
                    padding 20px 0px
                    border-bottom-style solid
                    border-width: 1px
                    border-color: #E4E4E4
                }
                .helprightContent {
                    color #666
                    padding 20px 20px
                }
            }
        }
    }
}
</style>
<style>
.helpContentLeft .el-collapse-item__header {
  background-color: #f5f5f5;
}
.helpWrapper .helpMiddle .helpCase .helpContentLeft .helpBottom .elCollapseWrapper .item[data-v-d890600a] {
    background-color: #f5f5f5;
}
.helpContentLeft .el-collapse-item__content {
    background-color: #f5f5f5;
}
</style>
